<template>
	<section class="search-bar w92 auto">
		<div class="layout">
			<van-search placeholder="请输入商品名称" :show-action="autofocused" v-model="value" autofocus  @search="submit" />
		</div>
	</section>
</template>
<script>
	import { Search } from 'vant';
	export default{
		name: 'Search-bar',
        components: {
	        Search
		},	
		props:
		{
			autofocused:{ type: Boolean }
		},
		data(){
			return{
				value: ""
			}
		},
		methods: {
			submit()
			{
				this.$router.replace('/search?searchName=' + this.value);
				this.$emit('input', this.value);
			}			
		},
		created()
		{
			if(this.$route.query.searchName)
				this.value = this.$route.query.searchName;		
		}
	}
</script>

<style lang="less">
	.search-bar {
		background: #fff !important;
		.van-search{
			width: 100%;
			background-color: initial !important;
			padding-left: 10px;
			padding-right: 10px;
		}
		.van-cell{
			background-color: #ededed;
		}
	}
</style>